{% extends 'base.html' %}
{% load i18n bootstrap3 %}
{% block title %}{{ object.id }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <h3>{{ object }} <small>{{ object.title }}</small></h3>
        <p>{{ object.abstract }}</p>
        <h4>Total Observation Requests:
            <a title="View requests" href="{% url 'userrequests:list' %}?proposal={{ object.id }}">{{ object.userrequest_set.all.count }}</a>
        </h4>
        <table class="table">
            <thead>
                <tr>
                    <td>Semester</td>
                    <td>Telescope Class</td>
                    <td>Hours</td>
                    <td>Used/Allocated</td>
                </tr>
            </thead>
            <tbody>
                {% regroup object.timeallocation_set.all by semester as timeallocations %}
                {% for ta in timeallocations reversed %}
                    <tr class="bg-info">
                        <td colspan="4">{{ ta.grouper }}</td>
                    </tr>
                    {% for ta in ta.list %}
                        <tr class="bg-grey">
                            <td></td>
                            <td>{{ ta.telescope_class }}</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr>
                            <td colspan="2"></td>
                            <td>Standard</td>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar" role="progress-bar" style="min-width: 3em; width:{% widthratio ta.std_time_used ta.std_allocation 100 %}%">
                                        {{ ta.std_time_used|floatformat}}/{{ ta.std_allocation }}
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"></td>
                            <td>Rapid Response</td>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar" role="progress-bar" style="min-width: 3em; width:{% widthratio ta.too_time_used ta.too_allocation 100 %}%">
                                        {{ ta.too_time_used|floatformat}}/{{ ta.too_allocation }}
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"></td>
                            <td>IPP</td>
                            <td>
                                Available: {{ ta.ipp_time_available|floatformat }} Limit: {{ ta.ipp_limit }}
                            </td>
                        </tr>
                    {% endfor %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="col-md-4">
        <form method="POST" action="" class="form">
            {% csrf_token %}
            {% bootstrap_form form=notification_form %}
            <p>You will recieve notifications whenever a requested observation on this proposal is completed.</p>
            <button type="submit" class="btn btn-default">Save</button>
        </form>
        <br/>
        <dl>
          <dt>Links</dt>
          <dd><a href="https://archive.lco.global/?PROPID={{ object.id }}" target="_blank">View Data on the LCO Science Archive</a></dd>
        </dl>
        {% if not user.profile.simple_interface or user == object.pi %}
        <dl>
            <dt>{% trans 'Principal Investigator' %}</dt>
            <dd>{{ object.pi.first_name }} {{ object.pi.last_name }}</dd>
            <dd><a href="mailto:{{ object.pi.email }}">{{ object.pi.email }}</a></dd>
        </dl>
        <dl>
            <dt>{% trans 'Co-Investigators' %} <a id="toggleci" title="Show/hide CI list" class="fa fa-eye fa-eye-slash"></a></dt>
            <div id="cilist">
                {% for mem in object.membership_set.all %}
                {% if mem.role != 'PI' %}
                <dd>{{ mem.user.first_name }} {{ mem.user.last_name }}</dd>
                <dd><a href="mailto:{{ mem.user.email }}">{{ mem.user.email }}</a></dd>
                    {% if user == object.pi %}
                        <dd><a href="{% url 'proposals:membership-delete' mem.id %}"><i class="fa fa-trash"></i> delete</a></dd>
                    {% endif %}
                {% endif %}
                {% endfor %}
            </div>
        </dl>
        {% endif %}
        {% if user == object.pi %}
        <div class="help-block">
            {% blocktrans %}
            Invite co-investigators by entering their email address below and
            pressing "add". If you would like to add multiple address at once, enter them below,
            comma separated. If the user is already registered with LCO, they will be added to
            this proposal. If not, they will be invited.
            {% endblocktrans %}
        </div>
        <form method="POST" action="{% url 'proposals:invite' pk=object.id %}" class="form-inline">
            {% csrf_token %}
            <div class="form-group">
                <label class="sr-only" for="email">Invite a Co-Investigator</label>
                <input name="email" class="form-control" placeholder="Invite Co-Investigators"/>
            </div>
            <button type="submit" class="btn btn-default">Add</button>
        </form>
        <br/>
        <dl>
            <dt>{% trans 'Pending Invitations' %}</dt>
            {% for invite in object.proposalinvite_set.all %}
            {% if not invite.used %}
            <dd><a href="mailto:{{ invite.email }}">{{ invite.email }}</a></dd>
            <dd>Invited: {{ invite.sent }}</dd>
            {% endif %}
            {% empty %}
            <p>No pending invitations.</p>
            {% endfor %}
        </dl>
        {% endif %}
    </div>
</div>
{% endblock %}
{% block extra_javascript %}
<script type="text/javascript">
    $('#toggleci').click(function(){
        $(this).toggleClass('fa-eye-slash')
        $('#cilist').toggle();
    });
</script>
{% endblock %}
